<template>
  <view class="container">
    <view class="avatar">
      <!-- 上传组件 -->
      <u-upload ref="avatar" name="avatar" maxCount="1" :fileList="filelist" width="120" height="120" @delete="del"
        @afterRead="read" />
    </view>
    <view class="content">
      <u--form labelPosition="left" labelWidth="60" :model="emplist" :rules="rules" ref="profile">
        <!-- 所属部门 -->
        <u-form-item label="权限组" prop="group_text" borderBottom @click="showGroup = true">
          <u--input v-model="emplist.group_text" disabled disabledColor="#ffffff" placeholder="请选择所属权限组"
            border="none"></u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <!-- 所属门店 -->
        <u-form-item label="门店" prop="store.name" borderBottom @click="showStore = true">
          <u--input v-model="emplist.store.name" disabled disabledColor="#ffffff" placeholder="请选择门店"
            border="none"></u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <!-- 昵称 -->
        <u-form-item label="昵称" prop="nickname">
          <u--input v-model="emplist.nickname" placeholder="请输入昵称" />
        </u-form-item>
        <u-form-item label="英文昵称" prop="username">
          <u--input v-model="emplist.username" placeholder="请输入英文昵称" />
        </u-form-item>

        <!-- 手机号 -->
        <u-form-item label="手机号" prop="mobile">
          <u--input v-model="emplist.mobile" placeholder="请输入手机号" />
        </u-form-item>

        <!-- 邮箱 -->
        <u-form-item label="邮箱" prop="email">
          <u--input v-model="emplist.email" placeholder="请输入邮箱" />
        </u-form-item>

        <!-- 密码 -->
        <u-form-item label="密码" prop="password">
          <u--input type="password" v-model="emplist.password" placeholder="请输入密码" />
        </u-form-item>

        <!-- 提交按钮 -->
        <u-button text="修改资料" icon="pushpin" size="small" type="success" :customStyle="btnStyle" @click="edit" />
      </u--form>
      <u-action-sheet :show="showGroup" :actions="grouplist" title="请选择你所属的权限组" @close="showGroup = false"
        @select="groupSelect()">
      </u-action-sheet>
      <u-action-sheet :show="showStore" :actions="stolist" title="请选择你所属门店" @close="showStore = false"
        @select="storeSelect()">
      </u-action-sheet>

      <!-- 消息提醒 -->
      <u-toast ref="notice"></u-toast>
    </view>
  </view>
</template>

<script>
export default {
  onLoad(options) {
    this.auth = this.$u.auth.check();

    // console.log(  this.$u.route)

    // 接收参数，如果能接收得到就接收不然给个null
    let empid = options.empid ? options.empid : 0;

    this.empid = empid;

    this.nowemployee();
    this.department();
    this.storelist()
  },
  created() {

    this.timer = setInterval(() => {

      let a = this.$u.count.check()
 
    }, 15000);

  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  onReady() {
    //让表单初始化验证规则
    this.$refs.profile.setRules(this.rules);
  },
  data() {
    return {
      showGroup: false,
      filelist: [],
      stolist: [],
      auth: {},
      grouplist: [],
      showStore: false,
      empid: 0,
      emplist: {
        store:{
          
        },
        
      },
      gid: 0,
      rules: {
        group_text: {
          required: true,
          message: "请选择你所属的权限组",
          trigger: ["blur", "change"],
        },
        nickname: {
          required: true,
          message: "请填写昵称",
          trigger: ["blur", "change"],
        },
        username: {
          required: true,
          message: "请填写英文昵称",
          trigger: ["blur", "change"],
        },

        "store.name": {
          required: true,
          message: "请选择你所属的门店",
          trigger: ["blur", "change"],
        },
        email: {
          required: true,
          type: "email", //uview 自带的验证规则
          message: "请填写邮箱",
          trigger: ["blur", "change"],
        },
        mobile: [
          {
            required: true,
            message: "请填写手机号码",
            trigger: ["blur", "change"],
          },
          {
            //自定义验证器函数，进行手机号码验证
            validator: (rule, value, callback) => {
              return uni.$u.test.mobile(value);
            },
            message: "手机号码不正确",
            // 触发器可以同时用blur和change
            trigger: ["change", "blur"],
          },
        ],
      },
    };
  },

  methods: {
    // 门店选择
    storeSelect(e) {
      this.emplist.store.name = e.name;
      this.emplist.stoid = e.id;
      this.$refs.emplist.validateField('store.name')
    },
    // 图片删除
    del() {
      this.filelist = [];
    },
    //图片读取,就是要上传
    async read(event) {
      //组装上传数据
      var data = {
        filePath: event.file.thumb,
        name: "avatar",
        header: {},
        formData: {
          adminid: this.emplist.id,
        },
      };

      //调用接口
      var result = await this.$u.api.admin.avatar(data);

      if (result.code) {
        this.filelist = [{ url: result.data }];

        //修改本地存储中的图像内容
        this.emplist.avatar_text = result.data;
      } else {
        this.$refs.notice.show({
          type: "error",
          message: result.msg,
        });
        return false;
      }
    },
    groupSelect(e) {
      this.emplist.group_text = e.name;
      this.emplist.gid = e.id;
      this.$refs.emplist.validateField('group_text')
    },
    edit() {
      this.$refs.profile
        .validate()
        .then(async () => {
          var data = {
            gid: this.emplist.gid,
            adminid: this.emplist.id,
            nickname: this.emplist.nickname,
            username: this.emplist.username,
            mobile: this.emplist.mobile,
            email: this.emplist.email,
            stoid: this.emplist.stoid
          };


          if (this.emplist.password) {
            data.password = this.emplist.password;
          }

          let result = await this.$u.api.admin.edit(data);

          if (result.code) {
            if (this.emplist.avatar) {
              this.filelist = [{ url: this.emplist.avatar_text }];
            }
            this.$refs.notice.show({
              type: "success",
              message: result.msg,
              duration: 1200,
              complete: () => {


                //返回上一个界面
                uni.reLaunch({
                  url: "/pagesB/employee/permission/auth/index"
                })
                // uni.$u.route({
                // 	type:'navigateBack',
                // 	delta:1
                // })

                return false
              }

            })

          }
        })
        .catch(() => {
          uni.$u.toast("效验失败");
        });
    },
    async department() {
      let result = await this.$u.api.admin.department();

      if (result.code) {
        this.grouplist = result.data;
      } else {
        this.$refs.notice.show({
          type: "danger",
          message: result.msg,
        });
      }
    },
    async nowemployee() {
      let data = {
        empid: this.empid,
      };

      let result = await this.$u.api.admin.nowemployee(data);
      if (result.code) {
        this.emplist = result.data;
        console.log(this.emplist);
        this.emplist.password = "";

        if (this.emplist.avatar) {
          this.filelist = [{ url: this.emplist.avatar_text }];
        }
      } else {
        this.$refs.notice.show({
          type: "warning",
          message: result.msg,
        });
      }
    },
    async storelist() {

      let data = {
        adminid: this.auth.id,
        stoid: this.auth.stoid
      }
      let result = await this.$u.api.product.storelist(data);

      if (result.code) {
        this.stolist = result.data;
      } else {
        this.$refs.notice.show({
          type: "danger",
          message: result.msg,
        });
      }
    },
  },
};
</script>

<style >
.content {
  padding: 20px;
}

.container {
  height: 100%;
  margin: 0 50rpx;
  box-sizing: border-box;
}

.avatar {
  text-align: center;
}

.u-avatar {
  margin: 80rpx auto 40rpx;
}

.xcx {
  width: 200rpx;
  height: 200rpx;
  margin: 80rpx auto 40rpx;
  border-radius: 100%;
  overflow: hidden;
}

.nickname {
  font-size: 14px;
  text-align: center;
}

.title {
  text-align: center;
  margin: 40rpx 0;
  font-size: 14rpx;
}

.avatar .u-upload {
  justify-content: center;
  align-items: center;
  margin: 3em auto;
}
</style>
  
